import React from "react";
import {Link} from "react-router";
import { connect } from 'react-redux'
import $ from "jquery";
import iScroll from "iscroll/build/iscroll-probe"; // 只有这个库支持onScroll,从而支持bounce阶段的事件捕捉

import Header from "../components/common/Header";
import Footer from '../components/common/Footer';

import ScrollList from '../components/product/ScrollList';


import '../../asset/css/product.css';

import { setExchangeModalData, setGlobalData } from '../actions/index';



class ProductList extends React.Component{
    constructor(){
        super()
        this.state  = {
            productList :[],
            page:1
        }
    }
    getMore(){
        let self = this

        $.ajax({
            url: '../webapp/data/productList.json',
            // data: {categoryId:categoryId},
            type: 'GET',
            dataType: 'json',
            success: (response) => {
                this.setState({
                    productList:this.state.productList.concat(response)
                })
                ++this.state.page;

                console.log("page==========="+this.state.page);
            }
        });

    }
    componentWillMount() {

        $.ajax({
            url: '../webapp/data/productList.json',
            // data: {categoryId:categoryId},
            type: 'GET',
            dataType: 'json',
            success: (response) => {
                this.setState({
                    productList:this.state.productList.concat(response)
                })
                ++this.state.page;

                console.log("page==========="+this.state.page);
            }
        });


    }
    render(){
        return(
            <div className="page-list">
                <Header title="商品列表"/>
                <ol className="version" id="listeItem">
                    <ScrollList
                        data={this.state.productList}
                        onScroll = {this.getMore.bind(this)}
                    />
                </ol>
                <Footer/>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        goodData: state.goodList,
        globalData: state.globalData
    }
};

export default connect(mapStateToProps, {setExchangeModalData, setGlobalData})(ProductList);

